<template>
  <div class="carriage">
    <van-nav-bar title="确认承运"
                 @click-left="onClickLeft"
                 @click-right="onClickRight"
                 fixed>
      <van-icon name="arrow-left"
                slot="left"
                color="#333"
                size="0.6rem" />
      <van-icon :name="require('@/assets/img/computer.png')"
                slot="right"
                color="#333"
                size="0.6rem" />
    </van-nav-bar>
    <div class="carriageInfo">
      <van-radio-group v-model="radio"
                       class='radio'>
        <van-radio name="1"
                   disabled>精拼</van-radio>
        <van-radio name="2"
                   disabled>德邦</van-radio>
        <van-radio name="3"
                   checked-color="#F18D00">人工报价</van-radio>
      </van-radio-group>
      <van-cell-group>
        <van-cell title="预估发车运费"
                  :value='sum' />
        <van-field v-model="orderData.ganXianPrice"
                   type="number"
                   label="干线运输应收"
                   input-align="right"
                   required
                   placeholder="请输入" />
        <van-field v-model="orderData.tiHuoPrice"
                   type="number"
                   label="提货费应收"
                   input-align="right"
                   placeholder="请输入" />
        <van-field v-model="orderData.faHuoPrice"
                   type="number"
                   label="送货费应收"
                   input-align="right"
                   placeholder="请输入" />
        <van-field v-model="orderData.priceTime"
                   type="number"
                   label="时效"
                   input-align="right"
                   maxlength="2"
                   placeholder="请输入" />
        <van-cell title="干线承运商"
                  is-link
                  :value="Carrier"
                  @click="changeCarrier"
                  required />
        <van-action-sheet v-model="showCarrier"
                          :actions="actionsCarrier"
                          @select="onSelectCarrier"
                          cancel-text="取消"
                          @cancel="onCancelCarrier" />
        <template v-if="Carrier!='精拼'">
          <van-cell title="直客承运商"
                    is-link
                    :value="orderData.kaCarrierCompanyName"
                    @click="changeCarrierUser"
                    required />
          <van-field v-model="orderData.kaCarrierContactName"
                     type="text"
                     label="承运商联系人"
                     input-align="right"
                     required
                     placeholder="请输入" />
          <van-field v-model="orderData.kaCarrierContactMobile"
                     type="number"
                     label="联系人手机号"
                     input-align="right"
                     required
                     placeholder="请输入" />
          <van-field v-model="orderData.carrierNumber"
                     type="number"
                     label="承运商订单号"
                     input-align="right"
                     required
                     placeholder="请输入" />
        </template>
        <van-field v-model="orderData.carrierPrice"
                   type="number"
                   label="干线运输应付"
                   input-align="right"
                   required
                   placeholder="请输入"
                   class='gan' />
        <van-cell title="提货承运商"
                  is-link
                  :value="pickvalue"
                  @click="changePick" />
        <template v-if="orderData.kaIspickUp==1">
          <van-field v-model="orderData.carrierPickUp"
                     type="number"
                     label="提货费应收"
                     input-align="right"
                     placeholder="请输入" />
        </template>
        <van-cell title="送货承运商"
                  is-link
                  :value="sendvalue"
                  @click="changeSend" />
        <template v-if="orderData.kaIssend==1">
          <van-field v-model="orderData.carrierSend"
                     type="number"
                     label="送货费应收"
                     input-align="right"
                     placeholder="请输入" />
        </template>
        <van-action-sheet v-model="showPick"
                          :actions="actionsPick"
                          @select="onSelectPick"
                          cancel-text="取消"
                          @cancel="onCancelPick" />
        <van-action-sheet v-model="showSend"
                          :actions="actionsSend"
                          @select="onSelectSend"
                          cancel-text="取消"
                          @cancel="onCancelSend" />
      </van-cell-group>
    </div>
    <div class="carriageBtn">
      <div class="btn-wrap">
        <div class="btn-left"
             @click="handelCancel">
          <span>取消</span>
        </div>
        <div class="btn-right"
             @click="handelSure">
          <span>保存</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { RadioGroup, Radio } from 'vant';
import { mapGetters } from 'vuex';
Vue.use(Radio);
Vue.use(RadioGroup);
import { orderSelect, orderChange } from '@/api/order';
import { DecryptToken } from '@/utils/auth';
export default {
  data () {
    return {
      showCarrier: false,
      showPick: false,
      showSend: false,
      Carrier: '请选择',
      actionsCarrier: [
        { name: '精拼' },
        { name: '直客承运商' }
      ],
      actionsPick: [],
      actionsSend: [],
      radio: '3',
      time: '',
      ganreceivable: '',
      pickreceivable: '',
      sendreceivable: '',
      carrierUser: '请选择',
      carrierContact: '',
      carrierPhone: '',
      carrierNum: '',
      gancost: '',
      pickcost: '',
      sendcost: '',
      pickvalue: '短驳',
      sendvalue: '短驳',
      isSelect: false,
      orderId: '',
      orderData: {},
      iscarriage: false
    };
  },
  computed: {
    ...mapGetters(['getUserInfo']),
    sum: function () {
      return Number(this.orderData.ganXianPrice) + Number(this.orderData.tiHuoPrice) + Number(this.orderData.faHuoPrice);
    }
  },
  mounted () {
    this.orderId = this.$route.query.orderId;
    if (this.orderId) {
      this.getData();
    }
    console.log(this.iscarriage);
  },
  beforeRouteEnter (to, from, next) {
    let iscarriage = false;

    if (from.path === '/choiceCarriage') {
      iscarriage = true;
    }
    next((vm) => {
      vm.iscarriage = iscarriage;
      console.log(vm.iscarriage);
    });
  },
  methods: {
    ischange () {
      if (this.orderData.pushPlatform == 0) {
        return '--';
      } else if (this.orderData.pushPlatform == 1) {
        return '精拼';
      } else if (this.orderData.pushPlatform == 2) {
        return '德邦';
      } else {
        return '直客承运商';
      }
    },
    getData () {
      orderSelect(this.orderId).then(res => {
        console.log(this.iscarriage);
        if (res.code == 200) {
          if (!this.iscarriage) {
            this.orderData = res.data;
            sessionStorage.setItem('carriage', JSON.stringify(res.data));
            this.allCarrie();
          } else {
            let data = sessionStorage.getItem('carriage');

            this.orderData = data ? JSON.parse(data) : {};
            this.allCarrie();
          }
        }
        console.dir(JSON.stringify(this.orderData, null, 2));
      });
    },
    allCarrie () {
      var platform = '';

      if (this.orderData.pushPlatform == 0) {
        platform = '';
      } else if (this.orderData.pushPlatform == 1) {
        platform = '精拼';
      } else if (this.orderData.pushPlatform == 2) {
        platform = '德邦';
      } else {
        platform = '直客承运商';
      }
      if (this.orderData.kaIspickUp == 0) {
        this.pickvalue = '短驳';
        this.sendvalue = '短驳';
      } else if (this.orderData.kaIspickUp == 1) {
        this.pickvalue = platform == '直客承运商' ? platform : platform + '承运商';
        this.sendvalue = platform == '直客承运商' ? platform : platform + '承运商';
      }
      this.Carrier = platform;
      this.isCarrier(platform);
    },
    isCarrier (val) {
      if (val == '精拼') {
        this.actionsPick = [
          { name: '精拼承运商' },
          { name: '短驳' }
        ];
        this.actionsSend = [
          { name: '精拼承运商' },
          { name: '短驳' }
        ];
        this.orderData.pushPlatform = 1;
      } else if (val == '直客承运商') {
        this.actionsPick = [
          { name: '直客承运商' },
          { name: '短驳' }
        ];
        this.actionsSend = [
          { name: '直客承运商' },
          { name: '短驳' }
        ];
        this.orderData.pushPlatform = 3;
      }
    },
    onClickLeft () {
      this.$router.back();
      sessionStorage.removeItem('carriage');
    },
    onClickRight () {
      let url = window.location.host;

      let index = url.indexOf('pre');

      if (index <= -1) {
        window.location.href = 'https://ka.lecarlink.com/index.aspx';
      } else {
        window.location.href = 'https://ka-pre.lecarlink.com/index.aspx';
      }
    },
    onSelectCarrier (item) {
      this.showCarrier = false;
      this.Carrier = item.name;
      //如果是重新选择干线承运商 默认是短驳
      this.orderData.kaIspickUp = 0;
      this.orderData.kaIssend = 0;
      this.pickvalue = '短驳';
      this.sendvalue = '短驳';
      //如果是重新选择干线承运商 则干线运费提货费 送货费清空
      this.orderData.carrierPickUp = null;
      this.orderData.carrierSend = null;
      this.orderData.carrierPrice = null;
      //如果是重新选择干线承运商 则直客承运信息清空
      this.orderData.kaCarrierCompanyName = null;
      this.orderData.kaCarrierContactMobile = null;
      this.orderData.kaCarrierContactName = null;
      this.orderData.carrierNumber = null;
      this.isCarrier(item.name);
    },
    onCancelCarrier () {
      this.showCarrier = false;
    },
    changeCarrier () {
      this.showCarrier = true;
      // var platform = ''
      // if (this.orderData.pushPlatform == 0) {
      //   platform = '--'
      // } else if (this.orderData.pushPlatform == 1) {
      //   platform = '精拼'
      // } else if (this.orderData.pushPlatform == 2) {
      //   platform = '德邦'
      // } else {
      //   platform = '直客承运商'
      // }
      // this.isCarrier(platform)
      // this.Carrier = platform;
    },
    onSelectPick (item) {
      this.showPick = false;
      console.log(item);
      this.pickvalue = item.name;
      if (item.name == '短驳') {
        this.orderData.kaIspickUp = 0;
        this.orderData.carrierPickUp = null;
      } else {
        this.orderData.kaIspickUp = 1;
      }
    },
    onSelectSend (item) {
      this.showSend = false;
      this.sendvalue = item.name;
      if (item.name == '短驳') {
        this.orderData.kaIssend = 0;
        this.orderData.carrierSend = null;
      } else {
        this.orderData.kaIssend = 1;
      }
    },
    onCancelSend () {
      this.showSend = false;
    },
    onCancelPick () {
      this.showCarrier = false;
    },
    changePick () {
      this.showPick = true;
    },
    changeSend () {
      this.showSend = true;
    },
    handelCancel () {
      console.log('handelCancel');
      this.$router.back();
    },
    handelSure () {
      if (this.validate()) {
        this.orderData.kaTotalprice = this.sum;
        this.orderData.kaOrderId = this.orderId;
        this.orderData.isAbnomal = 0;
        this.orderData.pushPlatformPc = this.orderData.pushPlatform;
        console.log(this.orderData);
        console.log(this.getUserInfo.accessToken);
        let user = DecryptToken.getUserInfo(this.getUserInfo.accessToken);

        this.orderData.kaInputUserId = user.userId;
        this.orderData.kaInputUserName = user.userName;
        this.orderData.carrierFlag = 0; // 确认承运的标识
        this.orderData.peoplePrice = (Number(this.orderData.ganXianPrice) + Number(this.orderData.faHuoPrice) + Number(this.orderData.tiHuoPrice)).toFixed(2);
        console.dir(JSON.stringify(this.orderData, null, 2));
        orderChange(this.orderData).then(res => {
          console.log(res);
          if (res.code == 200) {
            sessionStorage.removeItem('carriage');
            this.$router.back();
          }
        });
      }
    }, 
    changeCarrierUser () {
      if (this.orderData.pushPlatform == 3) {
        sessionStorage.setItem('carriage', JSON.stringify(this.orderData));
        this.$router.push({
          path: '/choiceCarriage'
        });
        console.log('1111');
      }
    },
    validate () {
      //获取电话号码
      var phone = this.orderData.kaCarrierContactMobile;
      var ganXianPrice = this.orderData.ganXianPrice;
      var tiHuoPrice = this.orderData.tiHuoPrice;
      var faHuoPrice = this.orderData.faHuoPrice;
      var kaCarrierCompanyName = this.orderData.kaCarrierCompanyName;
      var kaCarrierContactName = this.orderData.kaCarrierContactName;
      var carrierNumber = this.orderData.carrierNumber;
      var Carrier = this.Carrier;
      var carrierPrice = this.orderData.carrierPrice;
      var carrierPickUp = this.orderData.carrierPickUp;
      var carrierSend = this.orderData.carrierSend;
      var kaIspickUp = this.orderData.kaIspickUp;
      var kaIssend = this.orderData.kaIssend;

      var regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/;
      var regNum = /^(-)?\d+(\.+\d{0,2})?$/; // 正负数两位小数

      let msg = '';

      console.log(carrierPickUp);
      if (ganXianPrice === null) {
        msg += '请输入干线运输应收\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regNum.test(ganXianPrice) || ganXianPrice == 0) {
        msg += '请输入正确的干线运输应收\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regNum.test(tiHuoPrice) && tiHuoPrice !== null) {
        msg += '请输入正确的提货费\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regNum.test(faHuoPrice) && faHuoPrice !== null) {
        msg += '请输入正确的发货费\n';
        this.$toast.fail(msg);
        return false;
      } else if (!Carrier) {
        msg += '请选择干线承运商\n';
        this.$toast.fail(msg);
        return false;
      } else if (!kaCarrierCompanyName && this.Carrier != '精拼') {
        msg += '请填写直客承运商\n';
        this.$toast.fail(msg);
        return false;
      } else if (!kaCarrierContactName && this.Carrier != '精拼') {
        msg += '请填写承运商联系人\n';
        this.$toast.fail(msg);
        return false;
      } else if (!phone && this.Carrier != '精拼') {
        msg += '请输入手机号\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regPhone.test(phone) && this.Carrier != '精拼') {
        msg += '请输入正确的手机号\n';
        this.$toast.fail(msg);
        return false;
      } else if (!carrierNumber && this.Carrier != '精拼') {
        msg += '请填写承运商订单号\n';
        this.$toast.fail(msg);
        return false;
      } else if (carrierPrice === null) {
        msg += '请输入干线运输应付\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regNum.test(carrierPrice)) {
        msg += '请输入正确干线运输应付\n';
        this.$toast.fail(msg);
        return false;
      } else if (!carrierPickUp && kaIspickUp == 1 && carrierPickUp != 0) {
        msg += '请输入提货费\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regNum.test(carrierPickUp) && kaIspickUp == 1) {
        msg += '请输入正确的提货费\n';
        this.$toast.fail(msg);
        return false;
      } else if (!carrierSend && kaIssend == 1 && carrierSend != 0) {
        msg += '请输入送货费\n';
        this.$toast.fail(msg);
        return false;
      } else if (!regNum.test(carrierSend) && kaIssend == 1) {
        msg += '请输入正确的送货费\n';
        this.$toast.fail(msg);
        return false;
      }
      return true;
    }
  }
};
</script>
<style lang="scss" scoped>
.carriage {
  width: 100%;
  height: 100%;
  background: #f8f8f8;
}

.radio {
  font-size: 15px;
  height: 50px;
  background: #fff;
  padding-left: 20px;
  display: flex;
  /deep/.van-radio {
    margin-right: 10px;
  }
}

.carriageInfo {
  // width: 94%;
  padding-top: 46px;
  margin-top: 10px;
  margin-left: 12px;
  margin-right: 12px;
  padding-bottom: 70px;
  text-align: left;
  .gan {
    /deep/ .van-field__label {
      width: 110px;
    }
  }
}

.carriageBtn {
  text-align: center;
  width: 100%;
  background: #fff;
  height: 60px;
  position: fixed;
  bottom: 0;
  .btn-wrap {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn-left {
      background: #fff;
      border: 1px solid #f18d00;
      border-radius: 2px;
      color: #f18d00;
      font-size: 18px;
      width: 47%;
      height: 44px;
      line-height: 44px;
      box-sizing: border-box;
    }
    .btn-right {
      width: 47%;
      height: 44px;
      line-height: 44px;
      font-size: 18px;
      background: #f18d00;
      border: 1px solid #f18d00;
      box-sizing: border-box;
      border-radius: 2px;
      color: #fff;
    }
  }
}
</style>

